const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

const entry = {
  main: resolve(__dirname, 'src', 'index.js'),
  second: resolve(__dirname, 'src', 'second.js'),
}

const output = {
  path: resolve(__dirname, 'build'),
  filename: '[name].js',
  clean: true,
}

const plugins = [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    title: 'index',
    chunks: ['index.js'],
    /* 当设置template的时候title的优先级不够，自如无法生效 */
    template: resolve(__dirname, 'src/assets/index.html')
  }),
  new HtmlWebpackPlugin({
    filename: 'second.html',
    title: 'second',
    // 设置chunks为 当前页面需要的 chunks
    chunks: ['second.js'],
  })
]

const rules = [
  {
    test: /\.html$/,
    use: 'html-loader'
  },
  // {
  //   test: /\.(png)$/,
  //   type: 'asset/resource',
  //   generator: {
  //     filename: 'image/[name][ext]'
  //   }
  // },
  // {
  //   test: /\.(css)$/,
  //   type: 'asset/resource',
  //   generator: {
  //     filename: 'style/[name][ext]'
  //   }
  // }
]

module.exports = {
  entry, 
  output,
  plugins,
  mode: 'development',
  module: {
    rules
  }
}